<template>
  <div class="flex h-[calc(100vh-30px)] bg-black">
    <div
      class="w-[300px] h-[100%] bg-[#262626] border-r-[1px] border-r-[#303034]"
    >
      <!-- <div
        class="w-[100%] my-[30px] flex flex-col justify-center items-center select-none"
      >
        <img
          src="@renderer/assets/icons/svg/electron-logo.png"
          class="w-[48px]"
        />
        <span
          class="text-nowrap text-[20px] text-[#fff] font-mono font-bold mt-[15px]"
          >脸谱大屏设计器</span
        >
      </div> -->
      <div
        class="w-[15%] aspect-square my-[10%] mx-[10%] flex items-center select-none"
      >
        <img src="@renderer/assets/icons/svg/electron-logo.png" />
        <span
          class="text-nowrap text-[20px] text-[#fff] font-mono font-bold ml-[20px] mt-[10px]"
          >{{ appName }}</span
        >
      </div>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#262626"
        class="el-menu-vertical-demo"
        text-color="#fff"
        :default-active="$route.path"
        router
      >
        <el-menu-item index="/recentlyEdited">
          <template #title>
            <el-icon><Clock /></el-icon>
            <span>最近编辑</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/myProject">
          <el-icon><DocumentCopy /></el-icon>
          <span>我的项目</span>
        </el-menu-item>
        <el-menu-item index="/templateMarket">
          <el-icon><Grid /></el-icon>
          <span>模板资源</span>
        </el-menu-item>
        <el-menu-item index="/dataSource">
          <el-icon><ChromeFilled /></el-icon>
          <span>数据源管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="flex-1 h-[100%] bg-[#212121]">
      <TopHeader @search="search" />
      <router-view
        v-if="userStore.ifLogin"
        :searchVal="searchVal"
      ></router-view>

      <div
        v-else
        class="flex flex-col items-center justify-end pb-[30px] w-[600px] mx-auto translate-y-[50%] aspect-video bg-[url('@renderer/assets/images/unlogin.png')] bg-cover"
      >
        <div class="flex flex-col items-center justify-center select-none">
          <span class="text-[20px] font-bold text-[#fff]">您还未登录</span>
          <span class="text-[13px] text-[#fff] mt-[8px] mb-[19px]"
            >请先登录再进行操作</span
          >
          <el-button
            type="primary"
            class="!bg-[white] w-[140px] !rounded-lg !h-[46px] !text-[#1E90FF] !font-bold !text-[18px]"
            @click="gotoLogin"
            >立即登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getRequestUrl } from "@renderer/utils/other";
import TopHeader from "@renderer/components/topHeader/index.vue";
import { ref, onMounted } from "vue";
import { useUserStore } from "@renderer/store/modules/user";
let userStore = useUserStore();
let searchVal = ref("");
const search = (val) => {
  console.log("val", val);
  searchVal.value = val;
};
let appName = ref("脸谱大屏设计器");
onMounted(async () => {
  let name = await getRequestUrl("APP_NAME");
  if (name) {
    appName.value = name;
  }
});
const gotoLogin = () => {
  userStore.toggleShowLogin(true);
};
</script>

<style scoped lang="scss">
.el-menu {
  border-right: 0px !important;
}
</style>
